<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            border: 2px solid;
            width: 60%;
            margin: 100px auto;
            font-weight: bold;
            font-size: 18px;
        }
    </style>
</head>
<body>
<div class="box1">
    <p>文字转成暗码</p>
    <input value="">
    <button>点击获取1</button>
    <p>暗码:</p>
</div>
<div class="box2">
    <p>暗码转换成文字</p>
    <input>
    <button>点击获取2</button>
    <p>这是我要对你说的话:</p>

</div>
<script>
    //获取内容
    let oP1 = document.querySelector('.box1 p:not(p:nth-child(1))')
    let oP2 = document.querySelector('.box2 p:not(p:nth-child(1))')
    //获取按钮
    let oB1 = document.querySelector('.box1 button')
    let oB2 = document.querySelector('.box2 button')
    // 创建一个Date对象来表示当前时间
    let now = new Date();
    let month = now.getMonth() + 1;
    let date = now.getDate();
    let key = parseInt(month + '' + date)
    let text1 = document.querySelector('.box1 input')
    let text2 = document.querySelector('.box2 input')
    on(oB1, text1, oP1, 1)
    on(oB2, text2, oP2, -1)

    function on(dom, tab1, tab2, num1) {
        dom.onclick = function () {
            tab2.innerHTML = null
            let val = tab1.value
            let nl = ''
            for (let i = 0; i < val.length; i++) {
                let num = val[i].charCodeAt() + (key * num1)
                nl += String.fromCharCode(num)
            }
            tab2.innerHTML += nl
        }
    }
</script>
</body>
</html>